{% extends "explorer/base.html" %}
{% load explorer_tags i18n static %}

{% block sql_explorer_content %}
    <div style="display: none">{% csrf_token %}</div>
    {% if recent_queries|length > 0 %}
        <div class="container">
            <h3>
                {% blocktrans trimmed with qlen=recent_queries|length %}
                    Your {{qlen}} Most Recently Run
                {% endblocktrans %}
            </h3>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>{% trans "Query" %}</th>
                        <th>{% trans "Last Run" %}</th>
                        <th class="text-center">CSV</th>
                    </tr>
                </thead>
                <tbody>
                    {% for object in recent_queries %}
                        <tr>
                            <td class="name">
                                <a href="{% url 'query_detail' object.query_id %}">{{ object.query.title }}</a>
                            </td>
                            <td>{{ object.run_at|date:"SHORT_DATETIME_FORMAT" }}</td>
                            <td class="text-center">
                                <a href="{% url 'download_query' object.query_id %}">
                                    <i class="bi-download"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    <div id="queries" class="container">
        <div class="row">
            <div class="col">
                <h3>{% trans "All Queries" %}</h3>
            </div>
            <div class="col text-end">
                <input class="search" placeholder="{% trans 'Search' %}" style="">
            </div>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>{% trans "Query" %}</th>
                    <th>{% trans "Created" %}</th>
                    {% if tasks_enabled %}
                        <th>{% trans "Email" %}</th>
                    {% endif %}
                    <th>{% trans "CSV" %}</th>
                    {% if can_change %}
                        <th>{% trans "Play" %}</th>
                        <th>{% trans "Delete" %}</th>
                    {% endif %}
                    <th>{% trans "Favorite" %}</th>
                    <th>{% trans "Ran Successfully" %}</th>
                    <th>{% trans "Run Count" %}</th>
                </tr>
            </thead>
            <tbody class="list">
                {% for object in object_list %}
                    <tr {% if object.is_in_category %}class="collapse {{object.collapse_target}}"{% endif %}>
                        {% if object.is_header %}
                            <td colspan="100">
                                <strong>
                                    <span data-bs-toggle="collapse" style="cursor: pointer;" data-bs-target=".{{object.collapse_target}}">
                                        {{ object.title }} ({{ object.count }})
                                    </span>
                                </strong>
                            </td>
                        {% else %}
                            <td class="name{% if object.is_in_category %} indented{% endif %}">
                                <a href="{% url 'query_detail' object.id %}">{{ object.title }}</a>
                            </td>
                            <td>{{ object.created_at|date:"SHORT_DATE_FORMAT" }}
                                {% if object.created_by_user %}
                                    {% blocktrans trimmed with cuser=object.created_by_user %}
                                        by {{cuser}}
                                    {% endblocktrans %}
                                {% endif %}
                            </td>
                            {% if tasks_enabled %}
                              <td>
                                  <a class="email-csv" data-query-id="{{ object.id }}">
                                      <i class="bi-send-arrow-down"></i>
                                  </a>
                              </td>
                            {% endif %}
                            <td>
                                <a href="{% url 'download_query' object.id %}">
                                    <i class="bi-download"></i>
                                </a>
                            </td>
                            {% if can_change %}
                                <td>
                                    <a href="{% url 'explorer_playground' %}?query_id={{ object.id }}">
                                        <i class="bi-code-square"></i>
                                    </a>
                                </td>
                                <td>
                                    <a href="{% url 'query_delete' object.id %}">
                                        <i class="bi-trash"></i>
                                    </a>
                                </td>
                            {% endif %}
                            <td> {% query_favorite_button object.id object.is_favorite 'query_favorite_toggle' %}</td>
                            <td>{% if object.ran_successfully %}
                                    <i class="bi-check-circle" style="color: green;"></i>
                                {% elif object.ran_successfully is not None %}
                                    <i class="bi-slash-circle" style="color: red;"></i>
                                {% endif %}
                            </td>
                            <td>{{ object.run_count }}</td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="emailCsvModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Email Query Results</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <input type="email" autofocus="true" name="email" id="emailCsvInput" class="form-control" placeholder="Email" />
                        <label for="emailCsvInput" style="display: none" aria-hidden="true">{% trans 'Email' %}</label>
                        <span class="input-group-btn">
                            <button id="btnSubmitCsvEmail" type="button" class="btn btn-primary">Send</button>
                        </span>
                    </div>
                    <div class="mt-3">
                        <div class="alert alert-success" style="display: none;" role="alert" id="email-success-msg">
                            {% trans 'Email will be sent when query completes' %}
                        </div>
                        <div class="alert alert-danger" style="display: none;" role="alert" id="email-error-msg">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
